<template>
    <div>
        <el-row>
            <el-col :span="24">
                <!-- 放搜索条件 -->
                <el-form :inline="true" size="small">
                    <el-form-item label="医生姓名">
                        <el-select clearable="" placeholder="请选择医生姓名" v-model="nursePatientForm.docId">
                            <el-option v-for="doctor in doctors " :key="doctor.id" :label="doctor.docName"
                                :value="doctor.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="病床">
                        <el-select clearable="" placeholder="请选择病床" v-model="nursePatientForm.sickbedId">
                            <el-option v-for="sickbed in sickbeds " :key="sickbed.id" :label="sickbed.bno"
                                :value="sickbed.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-form-item label="患者姓名">
                            <el-input placeholder="请输入患者姓名" clearable=""
                                v-model="nursePatientForm.patientName"></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryHzList">查询</el-button>
                    </el-form-item>
                </el-form>

            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 表格 -->
                <el-table :data="tableData" style="width: 100%" border >
                    <el-table-column prop="patId" label="病人id" v-if="false"></el-table-column>
                    <el-table-column prop="name" label="病人"></el-table-column>
                    <el-table-column prop="deName" label="部门"></el-table-column>
                    <el-table-column prop="docId" label="医生id" v-if="false"></el-table-column>
                    <el-table-column prop="docName" label="医生"></el-table-column>
                    <el-table-column prop="bno" label="病床"></el-table-column>
                    <el-table-column prop="hzStartDate" label="入住时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-button type="primary" icon="el-icon-zoom-in"
                                    @click="handleSelet(scope.row)"></el-button>
                                <el-button type="primary" icon="el-icon-s-order"
                                    @click="queryNr(scope.row.patId)"></el-button>
                                <el-button type="primary" icon="el-icon-message-solid"  @click="querydo(scope.row.patId)"></el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>


            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 分页 -->
                <el-pagination background :current-page="pageNum" :page-size="pageSize" @next-click="nextPage"
                    @prev-click="prePage" @current-change="currentPage" @size-change="sizeChange"
                    layout="prev, pager, next,total,sizes" :total="total" :page-sizes="[5, 10, 15, 20]">
                </el-pagination>

            </el-col>
        </el-row>
        <el-dialog title="添加护理记录" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules">
                <el-form-item label="体温" label-width="120Px" prop="nrTemperature">
                    <el-input autocomplete="off" style="width: 300px;" v-model="form.nrTemperature"></el-input>
                </el-form-item>
                <el-form-item label="血压" label-width="120Px" prop="nrBloodPressure">
                    <el-input autocomplete="off" style="width: 300px;" v-model="form.nrBloodPressure"></el-input>
                </el-form-item>
                <el-form-item label="心率" label-width="120Px" prop="nrPulse">
                    <el-input autocomplete="off" style="width: 300px;" v-model="form.nrPulse"></el-input>
                </el-form-item>
                <el-form-item label="护理记录" label-width="120Px" prop="nrContent">
                    <el-input autocomplete="off" style="width: 300px;" v-model="form.nrContent"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addNursingRe">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="护理记录" :visible.sync="dialogTableVisible1" width="1000px">
            <el-table :data="gridData1">
                <el-table-column property="docName" label="护理医生" ></el-table-column>
                <el-table-column property="nrTemperature" label="温度" ></el-table-column>
                <el-table-column property="nrBloodPressure" label="血压"></el-table-column>
                <el-table-column property="nrPulse" label="心率"></el-table-column>
                <el-table-column property="nrDate" label="护理日期"></el-table-column>
                <el-table-column property="nrContent" label="内容"></el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog title="医嘱列表" :visible.sync="dialogTableVisible2">
            <el-table :data="gridData2">
                <el-table-column property="id" label="医嘱id" v-if="false"></el-table-column>
                <el-table-column property="patientName" label="病人姓名" ></el-table-column>
                <el-table-column property="docName" label="医生姓名" ></el-table-column>
                <el-table-column property="doContent" label="医嘱"></el-table-column>
                <el-table-column property="nurName" label="执行护士"></el-table-column>
                <el-table-column property="doStatus" label="医嘱状态" v-if="false">

                </el-table-column>
                <el-table-column  label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="updateNurId(scope.row.id)" :disabled="scope.row.doStatus==1"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>



    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            pageNum: 1,
            pageSize: 6,
            total: 0,
            doctors: [],
            sickbeds: [],
            nursePatientForm: {
                docId: "",
                sickbedId: "",
                patientName: ""
            },
            dialogFormVisible: false,
            dialogTableVisible1: false,
            dialogTableVisible2: false,
            form: {
                selectRowData: {},


            },
            rules: {
                nrTemperature: [
                    { required: true, message: '请输入体温', trigger: 'blur' }
                ],
                nrBloodPressure: [
                    { required: true, message: '请输入血压', trigger: 'blur' }
                ],
                nrPulse: [
                    { required: true, message: '请输入心率', trigger: 'blur' }
                ],
                nrContent: [
                    { required: true, message: '请输入护理记录', trigger: 'blur' }
                ]
            },
            selectRowData: {},
            gridData1: [],
            gridData2: [],


        }
    },
    methods: {
        handleSelet(val) {
            this.selectRowData = val
            this.dialogFormVisible = true
            console.log(this.selectRowData)

        },
        nextPage(val) {
            //用户点击下一页触发
            this.pageNum = val;
            this.queryHzList();
        },
        prePage(val) {
            //上一页
            this.pageNum = val;
            this.queryHzList();
        },
        currentPage(val) {
            //当前页
            this.pageNum = val;
            this.queryHzList();
        },
        sizeChange(val) {
            this.pageNum = 1
            this.pageSize = val;
            this.queryHzList();
        },
        //查询下拉框
        querySelect() {
            this.$axios.get("api/nursepatient/queryselect")
                .then(res => {
                    if (res.data.code == 200) {
                        this.doctors = res.data.data.doctors
                        this.sickbeds = res.data.data.sickBeds
                    }
                })
        },
        queryHzList() {
            let pageparam = {}
            pageparam.pageNum = this.pageNum
            pageparam.pageSize = this.pageSize
            pageparam.param = this.nursePatientForm
            this.$axios.post("api/nursepatient/queryhzlist", pageparam)
                .then(res => {
                    this.pageNum = res.data.data.pageNum
                    this.pageSize = res.data.data.pageSize
                    this.total = res.data.data.total
                    this.tableData = res.data.data.list
                })
        },
        addNursingRe() {
            let param = {}
            param.patId = this.selectRowData.patId
            param.docId = this.selectRowData.docId
            param.nrTemperature = this.form.nrTemperature
            param.nrBloodPressure = this.form.nrBloodPressure
            param.nrPulse = this.form.nrPulse
            param.nrContent = this.form.nrContent
            this.$axios.post("api/nursingrec/addnur", param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.dialogFormVisible = false
                        this.$message.success("添加成功！")
                    }
                })
        },
        queryNr(patId){
            this.dialogTableVisible1=true
            this.$axios.get("api/nursingrec/querynr/"+patId)
            .then(res=>{
                this.gridData1=res.data.data
            })
        },
        querydo(patId){
            this.dialogTableVisible2=true
            this.$axios.get("api/doctoradvice/querydo/"+patId)
            .then(res=>{
                this.gridData2=res.data.data
            })

        },
        //修改医嘱的护士id
        updateNurId(id){
            this.$axios.get("api/doctoradvice/updatenurid/"+id)
            .then(res=>{
                if(res.data.code==200){
                    this.$message.success("已执行医嘱")
                    this.dialogTableVisible2=false
                    this.queryHzList()
                }
                
            })

        }

    },
    created() {
        this.querySelect()
        this.queryHzList()

    }

}
</script>

<style scoped>
 .el-button-group {
        margin-right: 10px;
    }
    .el-table {
        margin-bottom: 20px;
    }

</style>